<script setup>
import { ref, reactive, computed } from 'vue'

// 步骤索引
const step = ref(1)

// 表单数据，包含多种类型的输入
const form = reactive({
  // 第一步：基本信息
  name: '',
  email: '',
  age: '',
  // 第二步：地址信息
  address: '',
  city: '',
  // 第三步：动态表单项（如多个手机号）
  phones: [''],
})

// 校验错误信息
const errors = reactive({})

// 校验规则
function validateStep(currentStep) {
  Object.keys(errors).forEach(k => delete errors[k]) // 清空上次错误
  if (currentStep === 1) {
    if (!form.name) errors.name = '姓名不能为空'
    if (!form.email || !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) errors.email = '请输入有效邮箱'
    if (!form.age || isNaN(Number(form.age)) || Number(form.age) < 18) errors.age = '年龄需为18岁及以上'
  } else if (currentStep === 2) {
    if (!form.address) errors.address = '地址不能为空'
    if (!form.city) errors.city = '城市不能为空'
  } else if (currentStep === 3) {
    form.phones.forEach((phone, idx) => {
      if (!phone || !/^1[3-9]\d{9}$/.test(phone)) errors[`phone${idx}`] = '请输入有效手机号'
    })
  }
  return Object.keys(errors).length === 0
}

// 下一步
function next() {
  if (validateStep(step.value)) {
    step.value++
  }
}
// 上一步
function prev() {
  if (step.value > 1) step.value--
}
// 提交
function submit() {
  if (validateStep(step.value)) {
    alert('提交成功！\n' + JSON.stringify(form, null, 2))
    // 这里可发送到后端
  }
}
// 动态添加手机号
function addPhone() {
  form.phones.push('')
}
// 动态移除手机号
function removePhone(idx) {
  if (form.phones.length > 1) form.phones.splice(idx, 1)
}
</script>

<template>
  <div class="multi-step-form">
    <h2>多步表单示例</h2>
    <div class="steps">
      <span :class="{active: step === 1}">1. 基本信息</span>
      <span :class="{active: step === 2}">2. 地址信息</span>
      <span :class="{active: step === 3}">3. 手机号</span>
    </div>
    <form @submit.prevent="step === 3 ? submit() : next()">
      <div v-if="step === 1">
        <div>
          <label>姓名：</label>
          <input v-model="form.name" type="text" />
          <span class="error" v-if="errors.name">{{ errors.name }}</span>
        </div>
        <div>
          <label>邮箱：</label>
          <input v-model="form.email" type="email" />
          <span class="error" v-if="errors.email">{{ errors.email }}</span>
        </div>
        <div>
          <label>年龄：</label>
          <input v-model="form.age" type="number" min="0" />
          <span class="error" v-if="errors.age">{{ errors.age }}</span>
        </div>
      </div>
      <div v-else-if="step === 2">
        <div>
          <label>地址：</label>
          <input v-model="form.address" type="text" />
          <span class="error" v-if="errors.address">{{ errors.address }}</span>
        </div>
        <div>
          <label>城市：</label>
          <input v-model="form.city" type="text" />
          <span class="error" v-if="errors.city">{{ errors.city }}</span>
        </div>
      </div>
      <div v-else-if="step === 3">
        <div v-for="(phone, idx) in form.phones" :key="idx">
          <label>手机号{{ idx + 1 }}：</label>
          <input v-model="form.phones[idx]" type="text" placeholder="请输入手机号" />
          <button type="button" @click="removePhone(idx)" v-if="form.phones.length > 1">移除</button>
          <span class="error" v-if="errors[`phone${idx}`]">{{ errors[`phone${idx}`] }}</span>
        </div>
        <button type="button" @click="addPhone">添加手机号</button>
      </div>
      <div class="actions">
        <button type="button" @click="prev" v-if="step > 1">上一步</button>
        <button type="submit">{{ step === 3 ? '提交' : '下一步' }}</button>
      </div>
    </form>
  </div>
</template>

<style scoped>
.multi-step-form {
  color: #000;
  max-width: 420px;
  margin: 40px auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(64, 158, 255, 0.08), 0 1.5px 6px rgba(0,0,0,0.04);
  padding: 32px 24px 24px 24px;
}
.steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}
.steps span {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  border-bottom: 2px solid #eee;
  color: #888;
}
.steps .active {
  color: #409eff;
  border-bottom: 2px solid #409eff;
  font-weight: bold;
}
form > div {
  margin-bottom: 18px;
}
label {
  display: inline-block;
  width: 80px;
}
input {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 8px;
  color: #000;
}
.error {
  color: #e74c3c;
  font-size: 13px;
  margin-left: 4px;
}
.actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
button {
  background: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 16px;
  cursor: pointer;
  transition: background 0.2s;
}
button[type="button"] {
  background: #eee;
  color: #333;
}
button:hover {
  background: #66b1ff;
}
</style> 